<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>图书管理</title>
    <link rel="stylesheet" href="static/layui/css/layui.css"/>
</head>
<body>
<div id="searchForm" style="padding: 20px; box-sizing: border-box;">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">图书编号</label>
                <div class="layui-input-inline">
                    <input name="bookId" style="display: none">
                    <input type="text" name="bookNumber" placeholder="请输入图书编号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">作者</label>
                <div class="layui-input-inline">
                    <input type="text" name="author" placeholder="请输入作者" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">分类</label>
                <div class="layui-input-inline">
                    <select name="bookTypeId">

                    </select>
                </div>
            </div>
        </div>
    </form>
</div>
<table id="bookTable" lay-filter="bookTable"></table>
<div id="bookUpdateForm" class="layui-form" hidden lay-filter="bookUpdateForm">
    <form class="layui-form">
        <div style="padding: 40px">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input name="bookId" style="display: none">
                        <input type="text" name="name" placeholder="请输入名称" lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">图书编号</label>
                    <div class="layui-input-inline">
                        <input name="bookId" style="display: none">
                        <input type="text" name="bookNumber" readonly placeholder="自动生成" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">作者</label>
                    <div class="layui-input-inline">
                        <input type="text" name="author" placeholder="请输入作者" lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">价格￥</label>
                    <div class="layui-input-inline">
                        <input type="text" style="width: 160px;" name="price" placeholder="请输入价格" lay-verify="number"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">出版社</label>
                    <div class="layui-input-inline">
                        <input type="text" name="press" placeholder="请输入出版社" lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">出版日期</label>
                    <div class="layui-input-inline">
                        <input type="text" id="pressDate" name="pressDate" lay-verify="date" placeholder="请选择出版日期"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="display:flex">
                <label class="layui-form-label">分类</label>
                <div class="layui-input-block">
                    <select name="bookTypeId">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">简介</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入简介" name="desc" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="bookBorrowForm" class="layui-form" hidden lay-filter="bookBorrowForm">
    <form>
        <div style="padding: 40px">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input name="bookId" style="display: none">
                    <input type="text" name="borrowUser" placeholder="请输入姓名" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="borrowPhone" placeholder="请输入手机号" lay-verify="required|phone" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/html" id="operation">
    <div>
        <button type="button" class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-event="bookUpdate">修改
        </button>
        {{# if(d.borrowId == null || d.borrowId == ''){ }}
        <button type="button" class="layui-btn layui-btn-xs layui-bg-orange layui-icon layui-icon-upload-circle"
                lay-event="bookBorrow">借出
        </button>
        {{# }else{ }}
        <button type="button" class="layui-btn layui-btn-xs layui-bg-blue layui-icon layui-icon-download-circle"
                lay-event="bookReturn">归还
        </button>
        {{# } }}
        <button type="button" class="layui-btn layui-btn-xs layui-bg-red layui-icon layui-icon-delete"
                lay-event="bookDelete">删除
        </button>
    </div>
</script>
<script type="text/html" id="toolbar">
    <div class="layui-btn-group">
        <button type="button" lay-event="search" class="layui-btn layui-btn-sm layui-icon layui-icon-search">查询
        </button>
        <button type="button" lay-event="reset"
                class="layui-btn layui-btn-sm layui-btn-primary layui-icon layui-icon-refresh">重置
        </button>
    </div>
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-sm layui-icon layui-icon-addition" lay-event="bookAdd">添加
        </button>
        <button type="button" class="layui-btn layui-btn-sm layui-bg-blue layui-icon layui-icon-download-circle"
                lay-event="bookReturns">归还
        </button>
        <button type="button" class="layui-btn layui-btn-sm layui-bg-red layui-icon layui-icon-delete"
                lay-event="bookDeletes">删除
        </button>
    </div>
</script>
</body>
<script type="text/javascript">
    // 定义全局上下文路径变量
    var contextPath = '<%=request.getContextPath()%>';
</script>
<script type="text/javascript" src="static/library/common.js"></script>
<script type="text/javascript" src="static/library/jquery.min.js"></script>
<script type="text/javascript" src="static/layui/layui.js"></script>
<script type="text/javascript" src="static/js/book.js"></script>
</html>
